<template>
  <div class="box">
    <h3>角色管理</h3>
    <div class="top_box">
      角色名称：<el-input
        v-model="params.name"
        style="width: 200px; margin-right: 20px"
        placeholder="请输入"
      />
      角色状态：<el-select
        v-model="params.status"
        placeholder="请选择"
        style="width: 100px"
      >
        <el-option label="所有" :value="0" />
        <el-option label="开启" :value="1" />
        <el-option label="关闭" :value="2" />
      </el-select>
      <el-button class="query" @click="query">查询</el-button>
      <el-button @click="reset">重置</el-button>
      <span class="add">
        <el-button type="primary" @click="save()">添加</el-button>
      </span>
    </div>

    <el-table
      :data="roles"
      border
      style="width: 100%"
      row-key="id"
      lazy
      :load="load"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column type="index" width="100" label="序号" align="center" />
      <el-table-column
        prop="name"
        label="角色名称"
        align="center"
        width="160"
      />
      <el-table-column prop="createTime" label="创建时间" align="center" />
      <el-table-column prop="status" label="状态" align="center" width="160">
        <template #default="{ row }">
          <el-switch
            v-model="row.status"
            class="ml-2"
            :active-value="1"
            :inactive-value="0"
            @change="chg(row.id, row.status)"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="260"
        header-align="center"
        align="center"
      >
        <template #default="{ row }">
          <el-button type="primary" :icon="Edit" circle @click="save(row)" />
          <el-button type="danger" :icon="Delete" circle @click="del(row.id)" />
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-pagination
        v-model="params.pageSize"
        :default-page-size="8"
        :page-sizes="[8, 10, 20, 30]"
        background
        layout="total,sizes,prev, pager, next,jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <addOrUpdate ref="editForm" />
  </div>
</template>
<script setup>
import { onBeforeMount, ref } from "vue";
import { getRoles } from "@/api/system/role.js";
import { ElMessage, ElMessageBox } from "element-plus";
import { Delete, Edit } from "@element-plus/icons-vue";
import { addOrUpdate } from "./addOrUpdate.vue";

//参数对象
const params = ref({
  name: "",
  status: 0,
  page: 0,
  pageSize: 10
});
//总条数
const total = ref(0);

//角色数组
const roles = ref([]);

//定义同名引用
const editForm = ref(null);

//监听子组件关闭事件
const isShow = ref(false);

const updateDept = ref(null);

//初始化，页面加载时获取数据
async function init() {
  let res = await getRoles(params.value);
  roles.value = res.data.list;
  params.value.page = res.data.page;
  params.value.pageSize = res.data.pageSize;
  total.value = res.data.total;
}

//分页触发的函数
//分页大小改变触发
function handleSizeChange(ps) {
  params.value.pageSize = ps;
  init();
}
//页数改变触发
function handleCurrentChange(pg) {
  params.value.page = pg;
  init();
}

async function load(row, treeNode, resolve) {
  let params = {
    parentid: row.id
  };
  let res = await getDepts(params);
  resolve(res.data);
}

async function chg(id, status) {
  let res = await updateStatus(id, status);
  if (res.code == 200) {
    ElMessage({
      message: "修改成功",
      type: "success"
    });
    init();
  }
}

function save(params) {
  editForm.value.init(params);
  isShow.value = true;
}

//删除
function del(id) {
  ElMessageBox.confirm("你确定要删除吗?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      todel(id);
    })
    .catch(() => {});
}
async function todel(id) {
  let res = await deleteDept(id);
  if (res.code == 200) {
    ElMessage({
      type: "success",
      message: "删除成功"
    });
  }
}
//查询
async function query() {
  init();
}
//重置
function reset() {
  deptName.value = "";
  init();
}
onBeforeMount(() => {
  init();
});
</script>
<style scoped>
.top_box {
  padding-top: 20px;
  width: 100%;
  height: 70px;
  background: #fff;
  padding-left: 50px;
  margin-bottom: 20px;
}
h3 {
  font-size: 16px;
  font-weight: normal;
  margin-top: 0;
  margin-bottom: 20px;
}
.add {
  float: right;
  margin-right: 20px;
}
.query {
  margin-left: 10px;
}
</style>
